<template>
  <view class="parking-detail">
    <!-- 停车场图片区域 -->
    <view class="parking-image">
      <image
        :src="parkingInfo.imagePath || '/static/parking.jpg'"
        mode="aspectFill"
      ></image>
      <view class="remaining-count">
        <u-icon name="car" color="#fff" size="20"></u-icon>
        <text>{{ parkingInfo.totalSpaces }}</text>
      </view>
    </view>

    <!-- 停车场信息区域 -->
    <view class="parking-info">
      <view style="background: #fff; padding: 20rpx">
        <view class="title">{{ parkingInfo.name }}</view>
        <view class="address">{{ parkingInfo.detailedAddress }}</view>

        <!-- 停车场标签信息 -->
        <view class="tag-group">
          <u-tag
            :text="`距您${parkingInfo.distance.toFixed(1)}公里`"
            plain
            size="mini"
            type="warning"
          ></u-tag>
          <u-tag
            :text="`总车位：${parkingInfo.totalSpaces}`"
            plain
            size="mini"
            type="warning"
          ></u-tag>
          <u-tag
            :text="`${parkingInfo.ratePerHour}元/小时`"
            plain
            size="mini"
            type="warning"
          ></u-tag>
        </view>
      </view>

      <!-- 收费规则 -->
      <view class="rules" style="margin-top: 20px">
        <view class="rules-title">收费规则</view>
        <view class="rules-content">
          <view>每小时{{ parkingInfo.ratePerHour }}元</view>
        </view>
      </view>
    </view>

    <!-- 底部预订按钮 -->
    <view class="footer">
      <u-button
        type="warning"
        text="立即预订"
        @click="handleBooking"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      parkingId: "",
      parkingInfo: {
        detailedAddress: "",
        distance: 0,
        id: "",
        imagePath: "",
        name: "",
        ratePerHour: 0,
        totalSpaces: 0,
      },
    };
  },
  onLoad(options) {
    // 获取路由参数中的id
    this.parkingId = options.id;
    console.log(this.parkingId);
    // 调用获取详情方法
    this.getParkingDetails(this.parkingId);
  },
  methods: {
    getParkingDetails(id) {
      this.$httpReq
        .parkingDetails("/api/parking/appDetails/" + id)
        .then((res) => {
          console.log(res);
          this.parkingInfo = res.data;
          uni.setStorageSync("parkingCarBuyInfo", res.data);
        });
    },
    handleBooking() {
      // 处理预订逻辑
      uni.navigateTo({
        url: "/pages/index/bookParkingPlace/confirm",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.parking-detail {
  min-height: 100vh;
  background-color: #f5f5f5;

  .parking-image {
    position: relative;
    height: 200px;

    image {
      width: 100%;
      height: 100%;
    }

    .remaining-count {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.5);
      padding: 5px 10px;
      border-radius: 20px;
      display: flex;
      align-items: center;

      text {
        color: #fff;
        margin-left: 5px;
      }
    }
  }

  .parking-info {
    // background: #fff;

    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .address {
      color: #666;
      font-size: 14px;
      margin-bottom: 15px;
    }

    .tag-group {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .rules {
      background: #fff;
      padding: 20rpx;

      .rules-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .rules-content {
        color: #666;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: #fff;
  }
}
</style> 